<template>
	<view class="login_content">
		
		<view class="form_content">
			<uni-row class="form_row">
				<uni-col class="form_item" :span="24">
					<view class="label">用户名称：</view>
					<input style="flex: 1; font-size: 20rpx;" type="text" v-model="formData.uname" placeholder="请输入用户名称" />
				</uni-col>
				<uni-col class="form_item" :span="24">
					<view class="label">真实名称：</view>
					<input style="flex: 1; font-size: 20rpx;" type="text" v-model="formData.realname" placeholder="请输入真实名称" />
				</uni-col>

				<uni-col class="form_item" :span="24">
					<view class="label">生日：</view>
					<input style="flex: 1; font-size: 20rpx;" type="text" v-model="formData.birthday" placeholder="请输入生日" />
				</uni-col>

				<uni-col class="form_item" :span="24">
					<view class="label">手机号码：</view>
					<input style="flex: 1; font-size: 20rpx;" type="text" v-model="formData.phone" placeholder="请输入手机号码" />
				</uni-col>

				<!-- <uni-col class="form_item" :span="24">
					<view class="label">行业：</view>
					<input style="flex: 1; font-size: 20rpx;" type="text" v-model="formData.job" placeholder="请输入真实名称" />
				</uni-col> -->
				<uni-col class="form_item" :span="24">
					<view class="label">性别：</view>
					<radio-group v-model="formData.sex" @change="changeSex">
						<radio :checked="formData.sex == '1'" value="1">男</radio>
						<radio style="margin-left: 40rpx;" :checked="formData.sex == '0'" value="0">女</radio>
					</radio-group>
				</uni-col>
				<uni-col class="form_item" :span="24">
					<view class="label">头像：</view>
					<view class="avatar_img">
						<view v-if="!formData.headimgurl" class="add_img" @click="handleUpload">
							<text class="iconfont icon-jia1"></text>
						</view>
						<view  v-else class="img_box">
							<image  @click="ChangePictures" style="width: 100%; height: 100%;" mode="scaleToFill" :src="formData.headimgurl" />
						</view>
					</view>
				</uni-col>
			</uni-row>

			
			<button hover-class="hover_btn" @click="changePassword">确认更改</button>
		</view>
	</view>
</template>
<script>
	import Http from '@/service/api'
	export default {
		data() {
			return {
				token: '',
				customId: '',
				dk: uni.getStorageSync('baseUrl'),
				lastTap: 0, // 记录上一次点击的时间戳 双击事件

				loading: false,

				baseUrl: '', // 服务地址  jinmiaompro.ywhzsoft.com/JinMiaoPbkdTest
				updateUrl: '', // 更新地址
				formData: {
					sex: '1',
					headimgurl: '',
				},
			};
		},
		onLoad() {
			//获取缓存账号
			this.selectMallUserInfo()
		},
		methods: {
			changePassword() {
				let param = {
					customId: uni.getStorageSync('customId'),
					main: {
						...this.formData,
					}
				}

				console.log('== param ', param)

				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.uname) {
					uni.showToast({
						title: '请输入用户名称',
						icon: 'none'
					});
					return;
				}
				
				Http.updateMallUserInfo(JSON.stringify(param)).then(r => {
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					});
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 900)
				}).catch( err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				})
					
			},
			ChangePictures() {
				let LoginType = uni.getStorageSync('loginData').LoginType
                const currentTime = new Date().getTime(); // 获取当前点击的时间戳
                const timeDifference = currentTime - this.lastTap; // 计算两次点击的时间差

                if (timeDifference < 300 && timeDifference > 0) { // 300ms以内为双击
					this.handleUpload()
                }
                this.lastTap = currentTime; // 更新最后一次点击的时间戳
			},

			handleUpload() {
                uni.chooseImage({
                    count: 1, // 最多选择1张图片
                    success: (res) => {
                        this.formData.headimgurl =  res.tempFilePaths[0]
						uni.uploadFile({
							url: `https://${this.dk}/BaseInfo/SysHuohao/UploadAdd.aspx`,
							filePath:  res.tempFilePaths[0], //从调用页面传入 --path: imgbox, 选取图片的地址数组  
							name: 'img',
							formData: {
								Module: '用户头像',
								ModulePrimaryKey: this.formData.uid,
								sort: 0,
								IsMain: 1,
								customId: uni.getStorageSync('customId'),
							},
							header: {
								"Content-Type": "multipart/form-data",
								"Authorization": 'Bearer ' + uni.getStorageSync('token'),
							},
							success: (r) => {
								console.log('== img r ', r)
								if (r.statusCode == 200) {
									let data = JSON.parse(r.data)
									console.log('== data ---- ', data)

									if (data.code == 1) {
										uni.showToast({
											title:'图片上传成功',
											icon:'none',
											duration:3000
										})
									}
								}
							},
							fail: (err) => {
								uni.showToast({
									title: '图片上传失败',
									icon: 'none'
								});
							}
						})
                      
                    },
                });
            },
			

			selectMallUserInfo() {
				let phone = uni.getStorageSync('loginData').phone
				let param = {
					customId: uni.getStorageSync('customId'),
					// phone: '14545787878',
					phone,
				}
				Http.selectMallUserInfo(param).then(r => {
					console.log('== r ', r)
					this.formData = r
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				})
			},

            // 性别选择
			changeSex(e) {
				let val = e.target.value
				this.formData.sex = val
			},
		},
	}
</script>

<style lang="scss" scoped>
	.login_content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		font-size: 20rpx;


		.form_content {
			flex: 1;
			background: #fff;
			padding: 20rpx 40rpx;

			.form_item {
				display: flex;
				align-items: center;
				padding-bottom: 40rpx;

				.label {
					white-space: nowrap;
				} 
			}

			button {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f9a94d;
				height: 60rpx;
				color: #fff;
				font-size: 30rpx;
				margin-bottom: 25rpx;
				border-radius: 30rpx;
			}

			.hover_btn {
				background: #e09845;
			}
		}

		.avatar_img {
			width: 150rpx;
			height: 150rpx;
			background: #e5e5e5;

			.add_img {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					font-size: 40rpx;
					color: #9a9a9a;
				}
			}

			.img_box {
				position: relative;
				width: 100%;
				height: 100%;

				.iconfont {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					color: red;
					font-size: 40rpx;
				}
			}
		}

	
	}
  
</style>